<template >
	<view :class="['popBox',animation?'ani':'']"  v-if="showPoup" :style="{'top':top+'px'}">
		<scroll-view class="areaBox"  scroll-y="true" :style="{height:scHeight+'px'}"  @touchmove.stop>
			<text :class="[rankType==0?'active':'']" @tap="changeRank(0)">智能排序</text>
			<text :class="[rankType==1?'active':'']" @tap="changeRank(1)">销量最多</text>
			<text :class="[rankType==2?'active':'']" @tap="changeRank(2)">评分最高</text>
			<text :class="[rankType==3?'active':'']" @tap="changeRank(3)">价格从高</text>
			<text :class="[rankType==4?'active':'']" @tap="changeRank(4)">价格最低</text>
			<text :class="[rankType==5?'active':'']" @tap="changeRank(5)">离我最近</text>
		</scroll-view>
		
	</view>
</template>


<script>
	export default {
		name: 'rankPopup',
		props: {
			show: {
				type: Boolean,
				default: true
			},
			scHeight:{
				type:Number,
				default:0
			},
			isFiexd:{
				type:Boolean,
				default:false
			}
			
		},
		data() {
			return {
				showPoup:false,
				animation:false,
				top:uni.getSystemInfoSync().statusBarHeight,
				rankType:0
			}
		},
		methods: {
			clear() {},
			open() {
				uni.hideTabBar({});			//隐藏底部tabbar
				this.showPoup = true;
				this.$emit('change', {
					show: true
				})
				setTimeout(()=>{
					this.animation=true
				},30)
				
				
			},
			close() {
				this.animation=false;
				setTimeout(()=>{
					uni.showTabBar({})			//显示底部tabbar
					this.showPoup = false
					this.$emit('change', {
						show: false
					})
				},300)
				
				
				
			},
			changeRank(e){
				this.rankType=parseInt(e);
				uni.$emit("rankChange2",{
					type:parseInt(e)
				})
				this.close()
			}

		},
		created(){
			
		},
		
		
	}
</script>
<style lang="less">
	@import "../../common/public.less";
	
	.popBox{
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		width: 100%;
		height: 0%;
		background-color: rgba(0,0,0,0.5);
		padding-top: 168upx;
		z-index: 980;
		display: flex;
		overflow: hidden;
		transition: all 0.3s; 
		
		text{
			display: block;
			width: 100%;
			font-size: 32upx;
			color: #333333;
			line-height: 80upx;
			border-left: 2upx solid rgba(0,0,0,0);
			border-bottom: 1px solid #efefef;
			// padding-left: 20upx;
			text-align: center;
		}
		
		.areaBox{
			width: 100%;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			border-top: 1px solid #EFEFEF;
			text{
				text-align: left;
				padding-left: 40upx;
			}
			.active{
				color: #ffcd11;
			}
			
		}
		.squareBox{
			width:70%;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			border-top: 1px solid #EFEFEF;
			padding-left: 20upx;
		}
	}
	.ani {
		height: 100%;
		
	}
	.aniDely {
		height: 100%;
		transition-property: all ;
		transition-duration: 1s;
		transition-timing-function: linear;
		transition-delay: 0.3s;
	}
</style>
